<template>
	<view class="container">
		<!-- 自定义导航栏 transparent-->
		<uni-nav-bar leftWidth="20px" rightWidth="60px"  backgroundColor="#fff" :border="false" :fixed="true" :statusBar="true">
			<block v-slot:left>
				<uni-icons class="location" @click="gohome" color="#000" type="left" size="20"></uni-icons>
			</block>
			<view class="headernav">
				<view class="search">
					<uni-icons class="location" color="#999" type="search" size="20"></uni-icons>
					<input type="text" @input="seach" placeholder="输入点名搜索">
				</view>
			</view>
			<block v-slot:right>
				<view @click="localaddress" style="display: flex; align-items: center; font-size: 14px;">
					<uni-icons class="location" color="#000" type="location" size="20"></uni-icons>
					{{data.city}}
				</view>
			</block>
		</uni-nav-bar>
		<!-- 	<view class="selctbox">
			<z-tabs ref="tabs" class='tabs' :list="data.partition" :current="data.isSingle" @change="onClickItem"
				active-color="#0bc4e3"></z-tabs>
		</view> -->
		<view class="box3">
			<view class="tit">
				点餐流程
			</view>
			<view class="processList">
				<view>
					<image src="https://pili-vod.guanxikeji.com/hemashangcheng/img/1730879468926.png"></image>
					<view class="txt">选择餐厅</view>
				</view>
				<view>
					<image class="icon" src="https://pili-vod.guanxikeji.com/hemashangcheng/img/1730879396029.png"></image>
				</view>
				<view>
					<image src="https://pili-vod.guanxikeji.com/hemashangcheng/img/1730879415346.png"></image>
					<view class="txt">选择菜品</view>
				</view>
				<view>
					<image class="icon" src="https://pili-vod.guanxikeji.com/hemashangcheng/img/1730879396029.png"></image>
				</view>
				<view>
					<image src="https://pili-vod.guanxikeji.com/hemashangcheng/img/1730879401997.png"></image>
					<view class="txt">等待取餐码</view>
				</view>
				<view>
					<image class="icon" src="https://pili-vod.guanxikeji.com/hemashangcheng/img/1730879396029.png"></image>
				</view>
				<view>
					<image src="https://pili-vod.guanxikeji.com/hemashangcheng/img/1730879407950.png"></image>
					<view class="txt">到店取餐</view>
				</view>
			</view>
		</view>

		<view class="list">
			<view class="item" v-for="(it,i) in data.list" :key="i" @click="goorder(it)" v-if="data.list.length>0">
				<view>
					<view class="item-left-title1">{{it.name}}</view>
					<view class="item-left-address">
						<view class="Al_Bold">营业时间：{{it.start_time}}-{{it.end_time}}</view>
					</view>
					<view class="item-left-address">
						<uni-icons type="location-filled" size="13" color="#d12128"></uni-icons>
						<view class="Al_Bold">{{it.address}}</view>
					</view>
				</view>
				<view class="item-center-line1"></view>
				<view>
					<view class="item1-buy">去下单</view>
					<view class="item1-distancey">距您{{it.distance}}</view>
				</view>
			</view>
			<view class="no_data" v-else>
				<view class="nodata"></view>
				<view class="txt">抱歉，暂无内容～</view>
			</view>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="popbox">
				<view class="hint-title">温馨提示</view>
				<view class="hint-text">
					<view>本产品为荷玛点餐服务</view>
					<view>荷玛专用通道，下单后不可取消。</view>
					<!-- <view>本产品为第三方点餐服务</view> -->
				</view>
				<view class="hint-text-red-tips">急单勿下 不支持取消哦~~</view>
				<view class="hint-btn">
					<view class="btn1" @click="() => popup.close()">取消点单</view>
					<view class="btn2" @click="xiadan">立即点单</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance
	} from "vue";
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	const {
		proxy
	} = getCurrentInstance();
	let popup = ref()
	let data = reactive({
		city: '选择城市',
		page: 1,
		size: 50,
		lat: 0,
		lng: 0,
		keyword: '',
		partition: ['附近餐厅', '全部收藏'],
		isSingle: 0,
		list: [],
		isflag: true,
		row: {},
	})
	onLoad((opt) => {
		try {
			if (opt.city) {
				data.city = opt.city
				data.isflag = false
			}


		} catch (e) {
			//TODO handle the exception
		}
		uni.getLocation({
			type: 'wgs84',
			geocode: true,
			success: function(res) {
				data.lng = res.longitude
				data.lat = res.latitude
				var url =
					"https://restapi.amap.com/v3/geocode/regeo?key=3e2ed72107f91ba0e8a4f25e297eba78&location=" +
					res.longitude + ',' + res.latitude
				uni.request({
					url: url,
					method: "get",
					success(ress) {
						if (data.isflag) {
							try {
								//这里好像要上线才有
								if (JSON.stringify(ress.data.regeocode.addressComponent.city) != "[]") {
									data.city = removeLastCharacterIfCity(ress.data.regeocode.addressComponent.city)
								} else {
									data.city = removeLastCharacterIfCity(ress.data.regeocode.addressComponent.province)
								}
							} catch (e) {
								data.city = '选择城市'
							}
						}
						if (data.city != '选择城市'){
								getGoods() // 获取门店
						}
					
					}
				})
			},
			fail(e) {
				console.log(e, "Ee")
			if (data.isflag) {
				data.city = '选择城市'
			}else{
				getGoods() // 获取门店
			}
			}
		})
	})
	onShow(() => {




	})

	function removeLastCharacterIfCity(str) {
		// 检查字符串是否为空或长度小于1
		if (!str || str.length < 1) {
			return str;
		}

		// 获取字符串的最后一个字符
		const lastChar = str[str.length - 1];

		// 如果最后一个字符是‘市’，则去掉它
		if (lastChar === '市') {
			return str.slice(0, -1);
		}

		// 否则返回原字符串
		return str;
	}

	function onClickItem(e) {
		data.isSingle = e
		// getGoods()
	}

	function gohome() {
		uni.redirectTo({
			url: `/pages/Lochig/cotticoffee/Starbucks`
		})
	}

	function getGoods() {
		proxy.$request({
			url: `api/openapi/cotticoffee/storeList/`,
			method: 'post',
			data: {
				page: data.page,
				page_size: data.size,
				lat: data.lat,
				lng: data.lng,
				city: data.city,
				keyword: data.keyword,
			},
			success: (res) => {
				console.log(res, "res")
				if (res.errno == 0) {
					data.list = res.data.list
				} else {
					if(res.errmsg !== '操作频繁'){
						uni.showToast({
							icon: 'none',
							title: res.errmsg
						})
					}
				}
			}
		})
	}
	//搜索
	function seach(e) {
		console.log(e.detail.value)
		data.keyword = e.detail.value
		getGoods()
	}
	//修改地址
	function localaddress() {
		uni.redirectTo({
			url: "/pages/Lochig/cotticoffee/selectCity"
		})

	}
	//去下单
	function goorder(row) {
		uni.setStorageSync('merdetails',row);
		data.row = row
		popup.value.open()
	}

	function xiadan() {
		popup.value.close()
		setTimeout(() => {
			uni.navigateTo({
				url: `/pages/Lochig/cotticoffee/selectDrink?id=${data.row.store_id}&lng=${data.row.lng}&lat=${data.row.lat}`
			})
		}, 200)

	}
</script>


<style scoped lang="scss">
	.container {
		.headernav {
			display: flex;
			align-items: center;
			width: 100%;

			.search {
				width: 100%;
				display: flex;
				align-items: center;
				padding: 10upx 20upx;
				background-color: #f5f5f5;
				border-radius: 40upx;

				input {
					font-size: 24upx;
				}

				.location {
					margin-right: 10upx;
				}
			}
		}

		.selctbox {
			width: 100%;
			background-color: #fff;
			padding-top: 10rpx;
		}

		.box3 {
			padding: 30rpx;

			.tit {
				font-size: 17px;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: rgba(0, 0, 0, .85);
			}

			.processList {
				margin: 23px 0px;
				text-align: center;

				display: flex;
				justify-content: space-between;
				align-items: center;

				image {
					width: 49px;
					height: 49px;
					background-size: cover;
				}

				.txt {
					font-size: 13px;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: rgba(0, 0, 0, .75);
				}

				.icon {
					width: 23px;
					height: 23px;
					background-size: cover;
				}
			}
		}

		.list {

			height: 100%;

			display: flex;
			flex-wrap: wrap;
			padding: 0px 30rpx 30rpx 30rpx;

			.item {
				padding: 16px;
				width: 100%;
				height: 110px;
				background: #fff;
				border-radius: 11px;
				border: 1px solid transparent;
				display: flex;
				justify-content: space-between;
				margin-bottom: 11px;

				.item-left-title1 {
					font-size: 17px;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: rgba(0, 0, 0, .85);
				}

				.item-left-address {
					display: flex;
					justify-content: flex-start;
					align-items: flex-start;
					margin-top: 10px;

					.Al_Bold {
						width: 220px;
						font-size: 11px;
						font-family: PingFang-SC-Medium, PingFang-SC;
						font-weight: 500;
						color: rgba(0, 0, 0, .45);
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 3;
						-webkit-box-orient: vertical;
						font-family: webfont !important;
						font-style: normal;
						-webkit-font-smoothing: antialiased;
						-moz-osx-font-smoothing: grayscale;
					}
				}

				.item-center-line1 {
					width: 0.5px;
					height: 82px;
					background-color: #f2f2f2;
				}

				.item1-buy {
					width: 70px;
					height: 35px;
					background:rgb(233 92 82);
					border-radius: 17px;
					font-size: 15px;
					font-family: PingFang-SC-Heavy, PingFang-SC;
					font-weight: 800;
					color: #fff;
					line-height: 35px;
					text-align: center;
				}

				.item1-distancey {
					font-size: 11px;
					font-family: PingFang-SC-Medium, PingFang-SC;
					font-weight: 500;
					color: rgba(0, 0, 0, .25);
					margin-top: 16px;
				}

			}

			.no_data {
				width: 100%;
				margin-top: 135px;

				.nodata {
					width: 143px;
					height: 110px;
					background-image: url('https://pili-vod.guanxikeji.com/hemashangcheng/img/1730880743886.png');
					background-size: 100% 100%;
					margin: 0 auto;
				}

				.txt {
					font-size: 15px;
					font-family: PingFang-SC-Medium, PingFang-SC;
					font-weight: 500;
					color: #353535;
					line-height: 22px;
					text-align: center;
				}
			}
		}
	}

	.popbox {
		background-color: #fff;
		border-radius: 11px;
		padding: 30rpx;
		display: flex;
		align-items: center;
		flex-direction: column;

		.hint-title {
			width: 100%;
			height: 24px;
			font-size: 17px;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: rgba(0, 0, 0, .85);
			line-height: 24px;
			text-align: center;
		}

		.hint-text {
			width: 100%;
			font-size: 13px;
			font-family: PingFang-SC-Medium, PingFang-SC;
			font-weight: 500;
			color: rgba(0, 0, 0, .45);
			line-height: 18px;
			text-align: center;
			margin-top: 22px;
		}

		.hint-text-red-tips {
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #fc2326;
			margin-top: 11px;

		}

		.hint-btn {
			width: 100%;
			height: 30px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-top: 0.5px solid rgba(0, 0, 0, .1);
			padding-top: 10px;
			margin-top: 10px;

			.btn1 {
				flex: 1;
				height: 30px;
				font-size: 17px;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #191919;
				line-height: 30px;
				text-align: center;
				border-right: 0.5px solid rgba(0, 0, 0, .1);
			}

			.btn2 {
				flex: 1;
				height: 30px;
				font-size: 17px;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #fc2326;
				line-height: 30px;
				text-align: center;
			}
		}
	}
::v-deep .container .headernav .search uni-input{
	width: 100% !important;
}
</style>